<template>
	<view class="dialog-container" v-if="isShow" @touchmove.stop.prevent="moveHandle">
		<view class="dialog-content">
			<view class="dialog-title">
				{{ title }}
			</view>
			<view class="dialog-text">
				{{ desc1 }}
				<text style="color: #314ad9" @click="toOpenPrivacyContract">{{ name }}</text>
			</view>
			<view class="dialog-tip">
				{{ desc2 }}
			</view>
			<view class="dialog-button-box">
				<button class="dialog-button" @click="close">拒绝</button>
				<button class="dialog-button primary" hover-class="hover-class" id="agree-btn" open-type="agreePrivacyAuthorization" @agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'uni-privacy',
	props: {
		title: {
			type: String,
			default: '用户隐私保护提示'
		},
		initiative: {
			type: Boolean,
			default: false
		},
		isCover: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			isShow: false,
			desc1: '您使用本产品服务前应当阅读井同意',
			name: '《用户隐私保护指引》',
			desc2: '当您点击同意并开始时用产品服务时，即表示你已理解并同息该条款内容，该条款将对您产生法律约束力。如您拒绝，将无法使用相应服务。'
		};
	},
	created() {
		if (wx.onNeedPrivacyAuthorization) {
			// wx.getPrivacySetting 不参与逻辑，判断用户授权情况。可以注释
			wx.getPrivacySetting({
				success: (res) => {
					console.log('getPrivacySetting', res);
					this.name = res.privacyContractName;
					if (this.initiative) {
						this.isShow = res.needAuthorization;
						if (this.isShow) this.isCover && uni.hideTabBar();
					}
				}
			});

			wx.onNeedPrivacyAuthorization((resolve) => {
				this.resolvePrivacyAuthorization = resolve;
				this.isShow = true;
				this.isCover && uni.hideTabBar();
			});

			wx.requirePrivacyAuthorize({
				success: (res) => {
					// 用户同意授权
					console.log('requirePrivacyAuthorize', res);
				},
				fail: () => {}, // 用户拒绝授权
				complete: () => {}
			});
		}
	},
	methods: {
		moveHandle() {},
		handleAgreePrivacyAuthorization() {
			// 用户点击同意按钮后
			if (this.resolvePrivacyAuthorization) {
				this.resolvePrivacyAuthorization({
					buttonId: 'agree-btn',
					event: 'agree'
				});
			}
			this.close();
		},
		toOpenPrivacyContract() {
			wx.openPrivacyContract({
				success: () => {},
				fail: () => {},
				complete: () => {}
			});
		},
		close() {
			this.isShow = false;
			this.isCover && uni.showTabBar();
		}
	}
};
</script>

<style lang="scss" scoped>
.dialog-container {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999;
	height: 100%;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.42);

	.dialog-content {
		position: absolute;
		bottom: 0;
		padding: 60rpx 40rpx;
		width: 100%;
		min-height: 200rpx;
		font-size: 16px;
		color: #333;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		box-sizing: border-box;
		background-color: #fff;

		.dialog-title {
			font-size: 18px;
			font-weight: 600;
			text-align: center;
		}

		.dialog-text {
			display: block;
			padding: 40rpx 40rpx 20rpx;
			font-size: 15px;
		}

		.dialog-tip {
			padding: 0 40rpx 40rpx;
			font-size: 13px;
			color: #666;
		}

		.dialog-button-box {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 0 40rpx;
		}

		.dialog-button {
			margin: 0;
			width: 240rpx;
			height: 80rpx;
			font-size: 14px;
			color: #333;
			line-height: 80rpx;

			&.primary {
				color: #fff;
				background-color: #00d354;
			}

			&.hover-class {
				background-color: #00b344;
			}
		}
	}
}
</style>
